import { CSSProperties, useRef } from 'react';
import Taro from '@tarojs/taro';
import moment from 'moment';
import { View, Text } from '@tarojs/components';
import { DynamicColors, GStyleSheet } from '@/utils/DarkMode';
import { BottomPopup } from '@/components/Modal/BottomPopup';
import { GButton } from '@/components/GButton';
import i18n from "i18n-js";
import { goLicense } from '@/utils'
import AppInfo from '../AppInfo'

interface IProps {
  style?: CSSProperties;
  isOpen: boolean;
  closePopup: () => void;
  onAgree: ({ buttonId }: { buttonId: string }) => void;
  isTab?: boolean
}

const dstyles = GStyleSheet.create({
  popContainer: {
    width: '100%',
    paddingTop: 35,
    paddingBottom: 25,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  title: {
    color: DynamicColors.titleTextColor,
    fontSize: 17
  },
  tip: {
    color: DynamicColors.subTitleTextColor
  },
  btn: {
    width: 120,
    height: 40,
  },
  link: { color: "#4888FA" },
  noUseText: {
    fontSize: 15,
    color: DynamicColors.tintColor,
  },
  agreeText: {
    fontSize: 15,
    color: '#FFFFFF'
  }
});

const LicensePopTip: React.FC<IProps> = ({ closePopup, style, isOpen, onAgree, isTab }) => {
  const styles = dstyles.useDynamicStyle();
  const agreeButtonIdRef = useRef(`agreeBtn-${moment().unix()}`)
  return (
    <BottomPopup isOpen={isOpen} rounded onClose={closePopup} closeable={false} isTab={isTab}>
      <View style={{ ...styles.popContainer, ...style }}>
        <View className='centerFlex' >
          <View style={styles.title}>{i18n.t("PRIVATE_DEAL")}{i18n.t("AND")}{i18n.t("USER_SERVICE_DEAL")}</View>
        </View>
        <View style={{ padding: 20, marginBottom: 10 }}>
          <Text style={styles.tip}>
            {i18n.t("PRIVACY_TIP_1")}
            <Text style={styles.link} onClick={goLicense("private")}>
              {i18n.t("PRIVATE_DEAL")}、
            </Text>
            <Text style={styles.link} onClick={goLicense("agreement")}>
              {i18n.t("USER_SERVICE_DEAL")}
            </Text>
            {i18n.t("PRIVACY_TIP_2")}
          </Text>
        </View>
        <View className='centerFlex' style={{ justifyContent: 'space-around', width: '100%', marginBottom: 20 }}>
          <GButton
            primary
            text={<Text style={styles.noUseText}>{i18n.t('NO_USE_NOW')}</Text>}
            style={styles.btn}
            onPress={closePopup}
          />
          <GButton
            openType='agreePrivacyAuthorization'
            id={agreeButtonIdRef.current}
            text={<Text style={styles.agreeText}>{i18n.t('AGREE')}</Text>}
            style={styles.btn}
            onPress={() => onAgree({ buttonId: agreeButtonIdRef.current })}
          />
        </View>
      </View>
    </BottomPopup>
  );
};
export default LicensePopTip;
